import React, {useState, useEffect} from 'react';

const Greetings = () => {
  return <p>Hello</p>
};

export default () => {
  const [count, setCount] = useState(0);
  const [display, setDisplay] = useState(false);

  /** 无穷递归*/
  // 点击两次后会报↓错误 (因为后面的count都是大于1 就会一直setDisplay 就会无穷递归
  // Uncaught Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.
  /*if(count>1) {
    setDisplay(x => true);
  }*/

  /** 如果写在一个[]的useEffect仍然会报错*/
  //react-dom.development.js:16411 Uncaught Error: Rendered more hooks than during the previous render.
  //每次函数执行前react会数一下该函数里有几个hook,如果hook数和上一次的不一样,就会报↑的错误
  if(count>1) {
    useEffect(() => {
      setDisplay(x => true);
    }, []);
  }

  /** 不会报错,但greeting也不会显现
   * 因为这里的deps为[]只会渲染一次*/
  /*if(count>1) {
    useEffect(() => {
      setDisplay(x => true);
    }, []);
  }else{ // ↓第一次渲染时 存的是这个
    useEffect(() => {
      setDisplay(x => false);
    }, []);
  }*/


  /** 如果两次,同样位置的hook的deps不一样也会报错*/
  //react_devtools_backend.js:6 Warning: The final argument passed to useEffect changed size between renders. The order and size of this array must remain constant.
  /*
    Previous: [false]
    Incoming: []
      in Unknown
      in div
  */
  /*if(count>1) {
    useEffect(() => {
      setDisplay(x => true);
    }, []);
  }else{ // ↓第一次渲染时 存的是这个
    useEffect(() => {
      setDisplay(x => false);
    }, [count>1]);
  }*/


  /** 这样不会报错,执行逻辑也符合预期*/
  /*if(count>1) {
    useEffect(() => {
      setDisplay(x => true);
    }, [count>1]);
  }else{ // ↓第一次渲染时 存的是这个
    useEffect(() => {
      setDisplay(x => false);
    }, [count>1]);
  }*/


  /** 虽然最后我们实现了预期的行为,但这样写犯错太容易了
   * 故不要将hook放在condition代码块里*/

  /** 你可以这样↓*/
  useEffect(() => {
    if(count>1){
      console.log('trigger effect');
      setDisplay(x => true);
    }
  }, [count>1]);

  return <div>
    <p>{count}</p>
    <button onClick={() => setCount(x => x + 1)}>button</button>
    {display && <Greetings/>}
  </div>;
};
